 <template>
  <div>
    <el-row type="flex" :gutter="20" style="padding-left: 20px; padding-top: 10px; margin-bottom: 9px">
      <el-col :span="1">
        <el-button type="text" @click="goback"><i class="el-icon-back" style="color: white;font-size: xx-large"></i></el-button>
      </el-col>
      <el-col :span="3">
        <h2 style="margin-top: 12px;margin-left: -25px">个人资料修改</h2>
      </el-col>
    </el-row>
    <hr/>
    <el-form :model="form" :rules="rules" ref="form">
      <div>
        <el-row>
          <el-form-item :label-width="formLabelWidth" prop="userName">
                <span slot="label" class="form-title">
                  姓名
                </span>
            <el-input v-model="form.userName"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label-width="formLabelWidth">
            <span slot="label" class="form-title">
                  附件
            </span>
            <el-row :gutter="20">
              <el-col :span="3">
                <el-image
                  style="width: 150px; height: 200px"
                  :src="form.url"
                  :fit="fit"></el-image>
              </el-col>
              <el-col :span="15">
                <el-button @click="handleUpLoad" class="el-blue-button" style="float: left;margin-left: 5%; margin-top: 10%;">浏览</el-button>
                <input ref="inputUpLoad" v-show="false" type="file" accept="*" @change="handleFile"/>
                <el-button @click='deletePic' class="el-blue-button" style="float: left;margin-left: 3%; margin-top: 10%;">删除</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label-width="formLabelWidth" prop="introduction">
                <span slot="label" class="form-title">
                  人员介绍
                </span>
            <el-input type = "textarea" v-model="form.introduction" :autosize="{ minRows: 4, maxRows: 8}"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" prop="resume">
                <span slot="label" class="form-title">
                  工作经历
                </span>
              <el-input type = "textarea" v-model="form.resume" :autosize="{ minRows: 4, maxRows: 8}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <el-row type="flex" justify="end">
      <el-col :span="2">
        <el-button @click="submitForm('form')" type="primary">
          <i class="el-icon-check"></i>保存
        </el-button>
      </el-col>
      <el-col :span="2">
        <el-button @click="cancel()" type="info">
          <i class="el-icon-close"></i>取消
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    const form = {
      id: 1,
      userName: 'ahh',
      introduction: 'ahhhh',
      resume: 'ahhhhh',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
    return {
      form,
      dialogKind: 0, // 0:修改信息dialog；1：增加信息dialog
      userName: '',
      userDialogForm: false,
      addDialogForm: false,
      formLabelWidth: '120px',
      rules: {
        userName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        introduction: [
          { required: true, message: '请输入人员介绍', trigger: 'blur' }
        ],
        resume: [
          { required: true, message: '请输入工作经历', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.form.id = this.$route.params.id
    this.form.userName = this.$route.params.name
  },
  methods: {
    handleUpLoad () {
      this.$refs.inputUpLoad.click()
    },
    handleFile () {
      let reader = new FileReader()

      reader.readAsDataURL(event.target.files[0])
      reader.onload = () => {
        this.form.url = reader.result
        console.log('src', this.form.url)
        reader.abort()
        reader = null
      }
    },
    goback () {
      this.$router.back(-1)
    },
    deletePic () {
      this.$confirm('此操作将删除用户的附件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/bulletin/deleteStaffUrl', {
          params: {
            id: this.form.id
          }
        }).then((res) => {
          if (res.code === 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message.error('修改失败!')
          }
        })
      }).catch(() => {

      })
    },
    cancel () {
      this.form.userName = this.$route.params.name
    },
    submitForm (formName) {
      this.$confirm('将保存修改后的员工信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/bulletin/editStaff', {
          params: {
            staffInfo: this.form
          }
        }).then((res) => {
          if (res.code === 1) {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.addDialogForm = false
            this.requestUserList()
          } else {
            this.$message.error('保存失败!')
          }
        })
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="scss">
.el-textarea__inner,
.el-textarea {
  background-color: rgb(35, 39, 61);
}
</style>
